<template>
  <div class="user-home-skeleton">
    <div class="user-home__left-top">
      <div class="img"></div>

      <div class="info-box">
        <div class="user-name"></div>
        <div class="user-social">
          
        </div>
        <div class="user-summary"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.user-home-skeleton {
  .user-home__left {
    width: 740px;

    &-top {
      width: 100%;
      height: 160px;
      background-color: white;
      display: flex;
      padding: 1rem;
      border-radius: 2px;
      box-sizing: border-box;

      align-items: center;

      .img {
        flex: 0 0 auto;
        width: 6rem;
        height: 6rem;

        margin-left: 0.8rem;
        margin-right: 1rem;
        background-color: #F0F0F0;
        border-radius: 50%;
      }

      .info-box {
        flex: 1 1 auto;
        margin-right: 1rem;

        display: flex;
        flex-direction: column;
        justify-content: center;

        .user-name {
          width: 100px;
          height: 20px;

          background-color: #F0F0F0;
        }

        .user-social {
          width: 200px;
          height: 20px;

        }

        .user-summary {
          margin-top: 14px;
          color: #72777b;
          width: 200px;
          height: 15px;

          background-color: #F0F0F0;
        }
      }

      .actio-box {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-right: 1rem;
      }
    }

    &-list {
      width: 100%;

      margin-top: 20px;

      .list-head {
        width: 100%;
        height: 46px;
        background-color: white;
        ul {
          display: flex;

          height: 100%;

          align-items: center;

          li {
            padding: 0 1rem;
            /*text-align: center;*/
            flex-shrink: 0;
            box-sizing: border-box;

            color: #909090;

            border-right: 1px solid #eaeaea;

            font-size: 0.9rem;

            user-select: none;

            cursor: pointer;

            &:hover {
              color: #007fff;
            }

            &:first-child {
              color: #007fff;
            }

            &:last-child {
              border-right: 0;
            }
          }
        }
      }

      .list-article {
        width: 100%;

        display: flex;

        flex-direction: column;
      }
    }
  }
}
</style>
